<template>
  <view class="repair">
    <image :src="baseUrl+'assets/static/creatbg.png'" class="creatBg"></image>
    <view class="repair_main">
      <view class="repair-input">
        <view class="fulNew">
          <view class="fulNew_left"> 客户名称 </view>
          <view class="fulNew_right"> {{basicData.hospital_name||'-'}} </view>
        </view>
        <view class="fulNew">
          <view class="fulNew_left"> 科室 </view>
          <view class="fulNew_right"> {{basicData.department.name||'-'}} </view>
        </view>
        <view class="fulNew">
          <view class="fulNew_left"> 类别 </view>
          <view class="fulNew_right"> {{basicData.pinpai.name||'-'}} </view>
        </view>
        <view class="fulNew">
          <view class="fulNew_left"> 品牌 </view>
          <view class="fulNew_right"> {{basicData.leibie.name||'-'}} </view>
        </view>
        <view class="fulNew">
          <view class="fulNew_left"> 型号 </view>
          <view class="fulNew_right"> {{basicData.xinghao.name||'-'}} </view>
        </view>
        <view class="fulNew">
          <view class="fulNew_left"> 序列号 </view>
          <view class="fulNew_right"> {{basicData.serial||'-'}} </view>
        </view>
        <view class="fulNew">
          <view class="fulNew_left"> 软件版本 </view>
          <view class="fulNew_right"> {{basicData.software_version||'-'}} </view>
        </view>
        <view class="fulNew">
          <view class="fulNew_left"> 附件 </view>
          <view class="fulNew_right"> {{basicData.enclosure||'-'}} </view>
        </view>
      </view>


      <view class="repair-w">
        <view class="repair-m-n">
          <view class="repair-left" /> 联系人信息
        </view>
        <view class="repair-mes">
          <view class="repair-mes_t"> 联系人 </view>
          <view class="repair-mes_b">
            <input type="text" v-model="contacts" placeholder-style="font-size:28rpx;line-height:50rpx;color:#B6BDBD;"
              placeholder="请输入内容" />
          </view>
        </view>
        <view class="repair-mes">
          <view class="repair-mes_t"> 联系电话 </view>
          <view class="repair-mes_b">
            <input type="number" v-model="mobile" placeholder-style="font-size:28rpx;line-height:50rpx;color:#B6BDBD;"
              placeholder="请输入内容" />
          </view>
        </view>
        <view class="repair-mes">
          <view class="repair-mes_t"> 预约时间 </view>
          <view class="repair-mes_b">
            <picker mode="date" :value="yuyue_time" @change="bindDateChange">
              <view class="uni-input">{{yuyue_time || '请选择'}}</view>
            </picker>
            <image src="../../static/arrow.png" class="arrow" mode=""></image>
          </view>
        </view>
        <view class="repair-mes">
          <view class="repair-mes_t"> 设备故障描述 </view>
          <view class="repair-mes_b">
            <textarea v-model="describe"
              placeholder-style="font-size:28rpx;line-height:50rpx;color:#B6BDBD;width:700rpx;" style="height:160rpx"
              placeholder="请输入内容" />
          </view>
        </view>
        <view class="repair-mes">
          <view class="repair-mes_t"> 故障图片/视频上传 </view>
          <view class="repair-img">
            <view class="repair-w-q-i-a" v-for="(item, index) in imgs_list" :key='index'>
              <image src="../../static/delect.png" mode="" class="del_img" @tap="del_img(index)"></image>
              <image v-if="item.type == 'image'" :src="item.url" mode="" style="width: 100%; height: 100%;" />
              <view v-else class="video-box">视频已上传</view>
            </view>
            <view class="repair-w-q-i-c" @tap="upImgs">
              <image src="../../static/add.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="submit" @tap="btnJump">
      提交
    </view>
  </view>
</template>

<script>
  import baseUrl from '@/request/baseUrl.js'
  export default {
    data() {
      return {
        contract_status_data: ['单次保养合同', '单次维修合同'],
        warranty_type: null, //	合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同   6单次维修合同、5单次保养合同、4整机铂金保合同、3整机金保合同、2整机银保合同、1整机技术保合同、0无合同
        baseUrl: baseUrl,
        yuyue_time: "",
        imgs_list: [], // 附件图片
        describe: '', //问题描述
        contacts: '', //联系人,
        mobile: '', //手机号
        software_version: '', //系统版本
        isSubmit: false,

        basicData: {},
        department_name: '',

      }
    },
    onLoad(e) {
      if (e.q) {
        let res = decodeURIComponent(e.q)
        this.id = this.GetRequest(res).id
        this.getInfo()
      }

    },
    methods: {
      getInfo() {
        this.$https.post('/phase/getEquipment', {
          id: this.id
        }).then(res => {
          this.basicData = res.data;
          console.log(this.basicData, '------------')
        })
      },
      GetRequest(params) {
        let url = params.substring(params.indexOf("?")); //获取url中"?"符后的字串
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
          let str = url.substr(1);
          let strs = str.split("&");
          for (let i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
          }
        }
        return theRequest;
      },
      bindDateChange(e) {
        this.yuyue_time = e.detail.value;
      },
      /* 删除照片 */
      del_img(i) {
        this.imgs_list.splice(i, 1)
      },
      /* 图片上传 */
      upImgs() {
        const token = uni.getStorageSync('userInfo').token
        uni.chooseMedia({
          count: 9, // 默认9
          mediaType: ['image', 'video', 'mix'],
          sourceType: ['album', 'camera'],
          sizeType: ['original', 'compressed'],
          maxDuration: 30, // 拍摄时长s
          camera: 'back',
          success: res => {
            res.tempFiles.forEach(item => {
              uni.uploadFile({
                url: `${baseUrl}api/common/upload`, //仅为示例，非真实的接口地址
                filePath: item.tempFilePath,
                name: 'file',
                formData: {
                  token: token // 上传附带参数
                },
                success: (res1) => {
                  console.log(res1.data);
                  if (res1.data.code == 0) {
                    uni.showToast({
                      title: res1.data.msg,
                      duration: 1500,
                      icon: 'error'
                    })
                  } else {
                    let url = JSON.parse(res1.data).data.fullurl
                    this.imgs_list.push({
                      type: item.fileType,
                      url: url
                    })
                  }
                },
                fail: (res3) => {
                  uni.showToast({
                    title: '上传失败',
                    duration: 1500,
                    icon: 'error'
                  })
                }
              });
            })
          },
          fail: (res) => {
            uni.showToast({
              title: '上传失败',
              duration: 1500,
              icon: 'error'
            })
            console.log(res, 33);
          }
        })
      },
      isMobile(mobile) {
        return /^1[3-9]\d{9}$/.test(mobile)
      },
      /* 创建工单 */
      btnJump() {
        console.log(this.isSubmit, '------------提交-----------')
        if (this.isSubmit) return;


        if (!this.isMobile(this.mobile)) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确的电话号码',
            duration: 1500
          })
          this.mobile = ''
        } else if (!this.contacts) {
          uni.showToast({
            icon: 'none',
            title: '请输入联系人姓名',
            duration: 1500
          })
        } else if (!this.yuyue_time) {
          uni.showToast({
            icon: 'none',
            title: '请选择预约时间',
            duration: 1500
          })
        } else {
          this.isSubmit = true
          let imgs = this.imgs_list.map(i => i.url).toString()
          let params = {
            equipment_id: this.basicData.id, //设备id
            describe: this.describe, //问题描述
            contacts: this.contacts, //联系人
            mobile: this.mobile, //联系电话
            images: imgs,
            yuyue_time: this.yuyue_time,
            contract_status: 6,
            warranty_type: 1,
            hospital_id: this.basicData.hospital_id,
          }
          this.$https.post('/warranty/smadd', params).then(res => {
            this.isSubmit = false
            uni.showToast({
              title: '提交成功',
              icon: 'none',
              duration: 1000,
              success: () => {
                setTimeout(() => {
                  uni.redirectTo({
                    url: '/pages/home/index'
                  })
                }, 1000)
              }
            })
          })
          setTimeout(() => {
            this.isSubmit = false
          }, 2000)
        }

      }

    }
  }
</script>

<style lang="scss" scoped>
  .uni-input {
    font-size: 28rpx;
    line-height: 50rpx;
    width: 600rpx;
    color: #B6BDBD;
  }

  .fulNew {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    line-height: 100rpx;
    color: #3B3D3D;
    font-weight: 500;
    background-color: #fff;
    font-size: 28rpx;

    &_right {
      width: 70%;
      border-bottom: 1rpx solid #e6e9e9;
    }
  }

  .del_img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 154rpx;
    height: 34rpx;
  }

  .submit {
    width: 622rpx;
    height: 80rpx;
    border-radius: 80rpx;
    background-color: $public-oclor;
    line-height: 80rpx;
    text-align: center;
    position: fixed;
    bottom: 20rpx;
    color: #FFFFFF;
    left: 9%;
    margin: 30rpx auto;
  }

  .repair_main {
    margin: 20rpx;
    position: absolute;
    padding-bottom: 140rpx;
    top: 9%;
    width: 94%;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .creatBg {
    width: 100%;
    height: 210rpx;
  }

  .repair-input {
    padding: 20rpx 32rpx;
    background-color: #f6f7fb;
    position: relative;
    background-color: #fff;

    .arrow {
      position: absolute;
      right: 60rpx;
      top: 50rpx;
      width: 0;
      height: 0;
      border-left: 15rpx solid transparent;
      border-right: 15rpx solid transparent;
      border-top: 30rpx solid #C6C7CB;
    }

    input {
      padding: 0 100rpx 0 50rpx;
      height: 88rpx;
      border-radius: 88rpx;
      background-color: #FFFFFF;
    }
  }

  .repair {
    background-color: #F5F6F8;
    min-height: 143vh;

    &-img {
      background-color: #fff;
      font-size: 28rpx;
      font-weight: 500;
      color: #3B3D3D;
      padding: 20rpx 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    &-mes {
      margin: 0 10rpx;
      padding: 20rpx 10rpx 6rpx;

      &_t {
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 14rpx;
        color: #3B3D3D;
        line-height: 33rpx;
      }

      &_b {
        background-color: #F5F6F8;
        font-size: 28rpx;
        font-weight: 500;
        color: #3B3D3D;
        padding: 14rpx 20rpx;
        line-height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .arrow {
          width: 16rpx;
          height: 26rpx;
        }
      }
    }

    &-w {

      &-q {
        padding: 58rpx 32rpx;

        &-p {
          font-size: 28rpx;
          color: #B6BDBD;
          line-height: 33rpx;
          margin-top: 40rpx;
        }

        &-i {
          display: flex;
          padding: 40rpx 0;
          flex-wrap: wrap;

          &-a {
            width: 154rpx;
            height: 154rpx;
            background: #F5F6F8;
            border-radius: 4rpx;
            position: relative;
            margin: 16rpx;

            image {
              border-radius: 4rpx;
            }

            .video-box {
              width: 100%;
              height: 100%;
              background-color: #31ea69;
              border-radius: 4rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
            }
          }

          &-c {
            width: 154rpx;
            height: 154rpx;
            background: #F5F6F8;
            position: relative;
            margin: 18rpx;

            image {
              width: 32rpx;
              height: 32rpx;
              position: absolute;
              left: 50%;
              top: 50%;
              margin-top: -15rpx;
              margin-left: -15rpx;

            }
          }
        }

        &-t {
          border-bottom: 2rpx solid #f6f7fb;

          textarea {
            width: 100%;
          }
        }
      }

      &-n {
        padding: 20rpx 32rpx;
        background: linear-gradient(91deg, #e2ecfb 0%, rgba(255, 255, 255, 0) 100%);
        font-size: 28rpx;
        font-weight: 600;
        color: #6AA6FA;
        line-height: 33rpx;
      }
    }

    &-m {
      border-bottom: 20rpx solid #f6f7fb;

      &-n {
        padding: 20rpx 0rpx;
        // background: linear-gradient(86deg, rgba(226, 140, 129, 0.15) 0%, rgba(226, 140, 129, 0) 100%);
        font-size: 32rpx;
        font-weight: 600;
        color: #434343;
        line-height: 33rpx;
        display: flex;
        align-items: center;

        .repair-left {
          width: 10rpx;
          height: 40rpx;
          margin-right: 10rpx;
          background-color: #1A66FF;
        }
      }

      &-f {
        margin: 0 25rpx;
        padding: 32rpx 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #f6f7fb;
        align-items: center;

        &-n {
          font-size: 28rpx;
          font-weight: 500;
          color: #3B3D3D;
          line-height: 33rpx;
        }

        &-i {
          font-size: 28rpx;
          font-weight: 500;
          color: #3B3D3D;
          line-height: 33rpx;
        }
      }
    }
  }
</style>